<template>
    <div class="bodyDiv">
        <div class="sourceDiv">
            <textarea class="textarea" v-model="sourceDivData" placeholder="源数据"></textarea>
        </div>
        <div class="buttonDiv">
            <Button type="default" ghost @click="rowToCol()">行转列</Button>
            <Button type="default" ghost @click="colToRow()">列转行</Button>
            <Input placeholder="分隔符" v-model="splitFlag" style="width: 70px"/>
            <span style="color: #FFF">分隔符，默认<Button ghost size="small" title="点击恢复默认" @click="defaultSplitFlag()">tab</Button></span>
        </div>
        <div class="targetDiv">
            <textarea class="textarea" v-model="targetDivData" placeholder="目标数据"></textarea>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'RowToCol',
    components: {},
    data () {
      return {
        sourceDivData: '',
        targetDivData: '',
        splitFlag: '\t'
      }
    },
    methods: {
      rowToCol () {
        console.info('行转列', this.sourceDivData)
        let sourceArray = this.sourceDivData.split(this.splitFlag)
        console.info('length:', sourceArray.length)
        let targetData = ''
        for (let i = 0; i < sourceArray.length; i++) {
          targetData += sourceArray[i] + '\n'
        }
        this.targetDivData = targetData
      },

      colToRow () {
        console.info('列转行')
        let sourceArray = this.sourceDivData.split('\n')
        let targetData = ''
        for (let i = 0; i < sourceArray.length; i++) {
          targetData += sourceArray[i] + this.splitFlag
        }
        this.targetDivData = targetData
      },
      defaultSplitFlag () {
        this.splitFlag = '\t'
      }
    }
  }
</script>

<style scoped>
    .bodyDiv {
        width: 100%;
        overflow: auto;
        /*border: 1px solid green;*/
    }
    .sourceDiv {
        width: 90%;
        height: 220px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        /*border: 1px solid gold;*/
    }

    .targetDiv {
        width: 90%;
        height: 220px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
    }

    .textarea {
        width: 100%;
        height: 100%;
    }

    .buttonDiv {
        margin-top: 10px;
        text-align: center;
    }
</style>
